// 对vue的全局指令进行封装
// 封装中间件函数的插件
const directiveObj = {
  install (Vue) {
    Vue.directive('fofo', {
      // 指令所在标签被插入真实DOM时被触发，如果标签用display :none隐藏再出现不会触发inserted
      inserted (el) {
        // el.focus()
        // 指令所在van-search组件
        // 组件跟标签是div input在内部
        // 以上都是原生标签对象
        // 原生DOM.nodeName拿到标签名字
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el 本身不是输入框，尝试往里获取一下
          setTimeout(() => {
            const theInput = el.querySelector('input')
            const theTextarea = el.querySelector('textarea')
            // 判断：不一定能获取得到，需要判断一下，如果有值再.focus(),才不报错
            if (theInput) theInput.focus()
            if (theTextarea) theTextarea.focus()
          }, 0)
        }
      },
      update (el) {
        // 标签更新时触发
        // el.focus()
        // 指令所在van-search组件
        // 组件跟标签是div input在内部
        // 以上都是原生标签对象
        // 原生DOM.nodeName拿到标签名字
        if (el.nodeName === 'TEXTAREA' || el.nodeName === 'INPUT') {
          el.focus()
        } else {
          // el 本身不是输入框，尝试往里获取一下
          setTimeout(() => {
            const theInput = el.querySelector('input')
            const theTextarea = el.querySelector('textarea')
            // 判断：不一定能获取得到，需要判断一下，如果有值再.focus(),才不报错
            if (theInput) theInput.focus()
            if (theTextarea) theTextarea.focus()
          }, 0)
        }
      }
    })
  }
}
export default directiveObj
